/**
 * 有个需求：
 *    用户名 输入框
 *    密码   输入框
 *    登录按钮  console.log(用户名：xxx, 密码： yyy)
 *
 * 思考下代码，咋有必要将数据存放到 state 中嘛？
 *    当前的需求只是做一个登录，具体的操作我们可以直接在登录的事件处理函数中去取值，
 *    没有必要给input绑定onInput设置数据到 state 中。
 *    input 输入的时候，还会一直触发 render
 */
import React from "react";
import ReactDOM from "react-dom/client";

class App extends React.Component {
  state = {
    username: "", // 用户名
    password: "", // 密码
  };

  setUsername = (event) => {
    // console.log(event);

    // 获取输入内容
    const value = event.target.value;
    // 给 state.username 赋值
    this.setState({
      username: value,
    });
  };

  setPassword = (event) => {
    // 取值
    const value = event.target.value;
    // 赋值
    this.setState({
      password: value,
    });
  };

  handleLogin = (event) => {
    // 阻止默认行为
    event.preventDefault();

    console.log(
      `用户名：${this.state.username} , 密码：${this.state.password}`
    );
  };

  render() {
    console.log("render");
    return (
      <div>
        <h1>App</h1>

        <form>
          <label>
            <span>用户名</span>
            <input
              type="text"
              value={this.state.username}
              onInput={this.setUsername}
            />
          </label>

          <br />

          <label>
            <span>密码</span>
            <input
              type="password"
              value={this.state.password}
              onInput={this.setPassword}
            />
          </label>

          <button onClick={this.handleLogin}>登录</button>
        </form>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);
